<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table, tr, td,th {
            border: 1px solid #0094ff;
            text-align: center;
        }
        table {
            width: 500px;
        }
        #box{
            margin:30px 0px;
        }
    </style>
</head>
<body>

<div id="box">
    <input type="text" placeholder="名字"/>
    <input type="text" placeholder="年龄"/>
    <input type="text" placeholder="性别"/>
    <input type="button" id="save" value="保存"/>
</div>
<table cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>名字</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="tab">
        <!--<tr>-->
            <!--<td></td>-->
            <!--<td></td>-->
            <!--<td></td>-->
            <!--<td><button>删除</button></td>-->
        <!--</tr>-->
    </tbody>
</table>
</body>
</html>


<script>
    var arr=[];
    window.onload=function(){
var ins=document.getElementsByTagName('input');//获取DOM对象
var btn=document.getElementById('save');
var obj={};

btn.onclick=function(){//绑定点击事件
    var uName=ins[0].value;//姓名
    var uAge=ins[1].value;
    var uSex=ins[2].value;
    console.log(obj);
    obj.name=uName;
    obj.age=uAge;
    obj.sex=uSex;
    arr.push(obj);//将对象存入数组
    console.log(arr);

var str="";
var oTable=document.getElementById('tab');
for(var i=0;i<arr.length;i++){
    str+="<tr>";
    str+="<td>"+arr[i].name+"</td>";
    str+="<td>"+arr[i].age+"</td>";
    str+="<td>"+arr[i].sex+"</td>";
    str+="<td><button onclick='dele(this)'>删除</button></td>";//哪个函数调用this就指向谁
    str+="</tr>";
} oTable.innerHTML=str;
    }
   };
    function dele(abc){
        var index=abc.parentNode.parentNode.rowIndex;//tr特有的属性索引值
        abc.parentNode.parentNode.parentNode.deleteRow(index-1);
        arr.splice(index-1,1)
    }

</script>